<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基础语法2：事件的绑定</title>
    <script src="https://unpkg.com/vue@3"></script>
</head>

<body>
    <div id="app">
        <h1> 知识点一：v-on指令：鼠标单机事件</h1>
        <p> 我已经被你点击了{{num}}次</p>
        <button v-on:click="num++">点我点我</button>
        <button v-on:click="num--">点我，我就减掉你</button>
        <h3>许多事件处理逻辑会更加复杂，所以复杂的逻辑直接把代码写在v-on指令是不合适的
            因此，对于复杂的逻辑，可以把代码放在方法中，然后调用
        </h3>
        <button v-on:click=" logInfo()">打印消息</button>
        <button v-on:click=" logInfo('我好开心啊啊啊啊')">打印带参数的消息</button>
        <h3>v-on:可以简写为@</h3>
        <button @click="logInfo('全部共享！！！！')">简写打印</button>
        <h1>知识点二：键盘事件krydown和keyup 键按下和键释放</H1>
        <input type="text" @keyup="show('我被释放了，十年风霜')">
        <input type="text" @keydown="show('我被按下了，十年风霜')">
        <h1>知识点三：其他事件：dbclick,contextmenu右击事件，mouseover鼠标上移事件
            mouseout鼠标移出事件
        </h1>
        <button @dblclick="num++">双击点我</button>
        <button @contextmenu="num++">右击点我</button>
        <button @mouseover="num++">鼠标上移我</button>
        <button @mouseout="num++">鼠标移出事件</button>
        <h1>知识点四：事件修饰符</h1>
        <h3>1.once事件修饰符，表示该事件只能点一次</h3>
        共享{{num}}次
        <button @click.once="num++">相信我我只能点一次</button>
        <h3>2. .prevent 事件修饰符，当事件触发时，阻止元素默认的行为</h3>
        <h4>例子：submit有个默认的行为，即点击提交后，会重新加载，通过prevent可以阻止这个行为</h4>
        <form @submit="handlesubmit()">
            <h5>不使用修饰符</h5>
           <button type="submit">提交</button>
          </form>
          <form @submit.prevent="handlesubmit()">
            <h5>使用修饰符</h5>
            <button type="submit">提交</button>
      </form>
      <h3>3. .stop事件，阻止冒泡</h3>
      <h4>冒泡是内部元素事件被触发后继续向外层触发事件</h4>
       <div id="box1" @click="box('我是box1')">box1
       <div id="box2" @click="box('我是box2')">box2
         <div id="box3" @click.stop="box('我是box3')">box3
          
        </div>
      </div>
      <h3>4.capture事件捕获</h3>
      <h4>如果我们在层叠事件中想先执行某个事，可以用capture修饰符
        它是内部元素被触发时，先处理capture，然后再提交当前事件
        捕获顺序由内到外
      </h4>
       <div id="box1" @click.capture="box('我是box1')">box1
       <div id="box2" @click.capture="box('我是box2')">box2
         <div id="box3" @click="box('我是box3')">box3</div>
    </div>
       </div>
       <h3>5. .self只在绑定了事件的对象层中使用</h3>
        <div id="box1" @click.="box('我是box1')">box1
       <div id="box2" @click.self="box('我是box2')">box2
         <div id="box3" @click="box('我是box3')">box3</div>
    </div>
    </div>
       <h3>6. 监听键盘事件的按键修饰符</h3>
       <P>.enter .tab .delete(监听删除和退格) .esc .space .up .down .left .right .shift .ctrl .alt ,meta(window徽标建)</P>
       <h4>当我们按下回车时,回弹出ok</h4>
       <input type="text" @keydown.enter="box('ok')">
       <input type="text" @keydown.enter.alt="box('okl')">
       <p>当有两个修饰符好，需要同时按键进行触发</p>
       <h3>7鼠标修饰符号</h3>
       <p> .left .right .middle</p>
       </div>
</body>

</html>
<script>
    const appConn = Vue.createApp({
        data() {
            return {
                num: 0,
            }
        },
        methods: {
            logInfo(val) {
                console.log(val || "我的VUE页面，你好！");
            },
            show(val) {
                console.log(val);
            },
            handleSubmit(){},
            box(val){
                alert(val)
            }
        },

    }).mount("#app")
</script>
<style>
    #box1{
        height: 200px;
        width: 300px;
        background-color: #ea3333;
    }
    #box2{
        height: 150px;
        width: 250px;
        background-color:#555;
    }
    #box3{
        height: 100px;
        width: 200px;background-color: #451;
    }
   
</style>